<template>
  <div id='app'>
    <el-form label-width='80px' :rules="rules"   :model="form">
      <!-- 活动名称 -->
      <el-form-item label='活动名称' prop="activeName">
        <el-input v-model='form.activeName' class="activeIPt" ></el-input>
      </el-form-item>
      <!-- 活动区域 -->
      <el-form-item label='活动区域'  prop="activeArea">
        <!-- <el-select v-model="form.activeArea" >
          <el-option label="宝安区" value="baoan"></el-option>
          <el-option label="龙华区" value="longhua"></el-option>
          <el-option label="光明区" value="guangming"></el-option>
          <el-option label="南山区" value="nanshan"></el-option>
        </el-select> -->
        <el-select v-model="form.activeArea" clearable>
          <el-option  v-for ="(area, index) in form.areaList" :label="area.value" :value="area.value" :key = "index"></el-option>
        </el-select>
      </el-form-item >
      <!-- 活动时间 -->
      <el-form-item label ="活动时间"  prop="activetyTime">
          <el-form-item prop="date">
            <el-date-picker
            v-model= 'form.date'
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
          </el-form-item>
          <el-form-item  prop="time">
            <el-time-select
            v-model= 'form.time'
            placeholder="选择时间"
            :picker-options="{
            start: '00:00',
            end: '24:00',
            step: '00:15'
          }"
          ></el-time-select>
          </el-form-item>
      </el-form-item>
      <!-- 即时配送 -->
      <el-form-item label='即时配送' >
        <el-switch v-model="form.switchValue"></el-switch>
      </el-form-item>
      <!-- 活动性质 -->
      <el-form-item label="活动性质"  prop="checkboxLists">
        <el-checkbox-group v-model="form.checkboxLists">
              <el-row>
                <el-col :span="10">
                  <el-checkbox label="美食/餐厅线上活动" value="active1"></el-checkbox>
                </el-col>
                <el-col :span="10">
                  <el-checkbox label="地推活动" value="active2"></el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-checkbox label="线下主题活动" value="active3"></el-checkbox>
                </el-col>
                <el-col :span="10">
                  <el-checkbox label="单纯品牌曝光" value="active4"></el-checkbox>
                </el-col>
              </el-row>
        </el-checkbox-group>
      </el-form-item>
      <!-- 特殊资源 -->
      <el-form-item label="特殊资源"  prop="radioValue">
        <el-radio-group v-model="form.radioValue">
          <el-radio label="线上品牌商赞助" value="online"></el-radio>
          <el-radio label="线下场地免费" value="underground"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 活动形式 -->
      <el-form-item label="活动形式"   prop="activeType">
        <el-input type="textarea"
        v-model="form.activeType"
        :rows="2"
        class="activeType"></el-input>
      </el-form-item>
      <!-- 表单创建取消 -->
      <el-form-item>
        <el-button type="primary" @click="createInTime">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getApi } from './api/myapi'
export default {
  data () {
    return {
      rules: {
        activeName: [{ required: true, message: '请输入活动名称', trigger: 'change' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
        ],
        activetyTime: [{ required: true, message: '请选择活动事件', trigger: 'change' }],
        date: [{ required: true, message: '请选择活动日期', trigger: 'blur' }],
        time: [{ required: true, message: '请选择活时间', trigger: 'blur' }],
        activeArea: [{ required: true, message: '请选择活动区域', trigger: 'blur' }],
        checkboxLists: [{ required: true, message: '请选择活动性质', trigger: 'blur' }],
        radioValue: [{ required: true, message: '请选择活动区域', trigger: 'blur' }],
        activeType: [{ required: true, message: '请选择活动形式', trigger: 'change' }]
      },
      form: {
        activeName: '',
        activeArea: '',
        areaList: [],
        date: '',
        time: '',
        switchValue: false,
        checkboxLists: [],
        radioValue: '',
        activeType: ''
      }
    }
  },
  async created () {
    const datas = await getApi()
    console.log(getApi())
    console.log(datas)
    this.form.areaList = datas
    console.log(this.form.areaList)
  },
  methods: {
    createInTime: function () {

    }
  }
}
</script>
<style lang='less'>
*{
  margin: 0;
  padding: 0;
}
#app{
  min-width: 600px;
  width: 40vw;
  margin: 20px auto;
  padding: 10px;
  border: 1px dashed #ddd;
.activeIPt{
  width: 30vw;
}
.activeType{
  width: 30vw;
}
}

</style>
